<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="../../layui-v2.9.0/layui/css/layui.css"></script>
</head>
<body>
<div style="width: 1380px">
    <div class="layui-col-xs10 layui-col-lg-offset1  "id="top-nav" style="height: auto">
        <div class="layui-panel ">
            <div class="layui-bg-gray"style="margin-top: auto;width: 850px;height:auto;float: left" >
                <div class="layui-row layui-col-space15">
                    <div id="frist" class="layui-col-xs12 ">
                        <div class="layui-card-header"  style="display: flex">
                            <p class="user";>
                                <a href="" class="user-mes1">小马宝莉  </a>
                            </p>
                        </div>
                        <div class="layui-card-body"style="font-size: 18px;">
                           <p id="MyReply"></p>
                            <div >



                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 " id="ID-flow-demo-manual">
                        <div class="layui-card">
                            <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 " >
                        <div class="layui-card">
                            <div class="layui-card-header"  style="display: flex">
                                <img src="../../img/img1.png" class="layui-nav-img" >
                                <p class="user";>
                                    <a href="" class="user-mes1 layui-icon-hover">小马宝莉  </a>
                                </p>
                            </div>
                            <div class="layui-card-body"style="font-size: 18px;">
                                <div class="layui-form">
                                    <label>
                                        <textarea id="write-page" name="" placeholder="评论......" class="layui-textarea"></textarea>
                                    </label>
                                </div>
                                <div class="layui-btn-container">

                                    <button id="write-back" onclick="postComment()" type="button" class="layui-btn layui-btn-normal">发表评论</button>

                                </div>
                            </div>

                            <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                            </div>

                        </div>
                    </div>
                    <!--                    </div>-->

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //回复
    function postComment() {
        // 获取输入框的值
        var comment = document.getElementById('write-page').value;

        // 清除之前的内容（可选）
        document.getElementById('MyReply').textContent = '';

        // 将内容设置到<p>标签中
        document.getElementById('MyReply').textContent = comment;
        // 获取目标元素的顶部位置
        var topNav = document.getElementById('top-nav');
        if (topNav) {
            // 滚动到目标元素的位置
            window.scrollTo(0, topNav.offsetTop);
        }

        // 你可以在这里添加其他的处理逻辑，比如提交到服务器等
        // ...
    }

    //点赞按钮的响应事件
    var isLiked = false; // 用来跟踪按钮状态的变量
    function trance(){
        let thumb = document.getElementsByClassName('thumbs')
        for(let i=0;i<thumb.length;i++){
            if (thumb[i].classList.contains('layui-icon-heart')) {
                // 如果已经被点击过，恢复默认颜色（假设默认颜色是黑色）
                thumb[i].classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart-fill');
                isLiked = false; // 重置状态
            } else {
                // 如果未被点击过，设置颜色为红色
                thumb[i].classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart');
                isLiked = true; // 更新状态
            }
        }
    }
    function scrollToBottom() {
        var writePage = document.getElementById('write-page');
        if (writePage) {
            // 滚动到write-page元素的底部
            window.scrollTo(0, writePage.getBoundingClientRect().bottom + window.pageYOffset - document.documentElement.clientTop);
        }
    }
    //流加载
    layui.use(function(){
        var flow = layui.flow;
        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo-manual', // 流加载容器
            scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function(page, next){ // 加载下一页

                // 模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 6; i++){
                        lis.push('<div class="layui-card">' +
                            '<div class="layui-card-header" style="display: flex">' +
                            '<p class="user">' + // 注意这里移除了不必要的分号
                            '<a href="" class="user-mes1">小马宝莉</a>' +
                            '</p>' +
                            '</div>' +
                            '<div class="layui-card-body" style="font-size: 18px;">' +
                            '道聚城买的，全程手机操作，2 个小时了还没回复，沟槽的策划要是搞针对，今晚直接欧门大招传送到他家轰个晚安焰火<br>' +
                            '<div>' +
                            '<div style="display: flex">' +
                            '<li class="layui-icon layui-icon-heart thumbs" onclick="trance()" data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>' +
                            '<li id="reply-this" onclick="scrollToBottom()" class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" lay-on="test-iframe-curl";></li>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>')
                    }


                    //添加对应id监听事件
                    next(lis.join(''), page < 1000); // 假设总页数为 6
                }, 520);
            }
        });
    });



    // //评论跳转方法
    // layui.use(['jquery'], function(){
    //     var $ = layui.jquery;
    //
    //     // 绑定点击事件
    //     $('#return').on('click', function(){
    //         window.location.href = 'index.html'; // 跳转到index.htm页面
    //     });
    // });



</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }
    .mbx{
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .span_css{
        margin-top: 20px
    }
    /*标签导航*/
    .a_index1{
        margin-left: 20px;
        margin-top: 20px;
        /*text-decoration: underline;*/
    }
    .a_index3{
        font-size: 13px;
        width: 5em;
        /*margin-left: 20px;*/
        margin-top: 20px;
    }
    a:hover{
        text-decoration: underline;
    }
    .a_index4{
        font-size: 15px;
        width: 4em;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
    }
    .p_index{
        color: black;
        margin-top: 10px;
    }
    .div_index{
        padding: 10px;
    }
    .p_index_color {
        background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
    }
    /*标签图片*/
    .img-index{
        width: 20px;
        height: 20px;
    }
    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
    h3{
        margin-top: 0;
    }
    .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
        width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
        height: auto; /* 保持图片的高宽比 */
        border-radius: 0; /* 移除边框圆角 */
        border: none; /* 如果图片有边框，也移除它 */
        /* 可以添加其他图片样式，比如margin, padding等 */
    }
    .layui-icon-hover {
        color: blue; /* 或者其他您想要的颜色 */
    }
</style>

</body>
</html>